refactor(home): redesign hackathon top bar with aurora gradient style#72
Open
refactor(home): redesign hackathon top bar with aurora gradient style#72
Conversation
📝 WalkthroughWalkthrough在首页引入并渲染新的 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant Home as 首页（pages/index）
participant Promo as PromoBar 组件
participant NavDOM as nav DOM
participant Activity as ActivityModel
User->>Home: 访问首页
Home->>Promo: 渲染 PromoBar
Promo->>NavDOM: 查询 nav 高度
NavDOM-->>Promo: 返回高度
Promo->>Promo: 设置 CSS 变量（--promo-top/--promo-margin）
Promo->>NavDOM: 注册 ResizeObserver / window.resize 监听
Promo->>Activity: 异步请求活动数据（fetchById）
Activity-->>Promo: 返回活动数据
Promo->>Home: 渲染 Alert 横幅（包含链接/事件名/关闭按钮）
User->>Promo: 点击关闭
Promo->>Promo: 更新本地 state 隐藏横幅
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
总体概述主页添加了黑客马拉松推广顶栏，由 React 状态控制其显隐。组件使用 变更清单
代码审查要点
审查工作量评估🎯 3 (Moderate) | ⏱️ ~20 分钟 庆祝诗句
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@pages/index.tsx`:
- Line 69: Replace the hardcoded event name inside the span (className
styles.hackathonTopBarEventName) with a call to the i18n t() function and add a
corresponding translation key (e.g. "hackathon.eventName") to your locale files;
update pages/index.tsx to use t('hackathon.eventName') (or the chosen key) so
the visible text is localized and ensure the new key exists in all supported
locales.
- Around line 57-84: The top-banner uses raw HTML elements and a hard-coded
event name; replace the <aside>/<div>/<a>/<button>/<span> usage with React
Bootstrap components (e.g., Alert, Card, Button/CloseButton) while preserving
behavior tied to isHackathonTopBarVisible, hackathonTopBarStyle,
HackathonTopBarLink and the closeHackathonTopBar handler, and move the literal
"Labor AI Hackathon 2026" into i18n as home_hackathon_top_bar_event_name,
rendering it via t('home_hackathon_top_bar_event_name') alongside the existing
t('home_hackathon_top_bar_title'), t('home_hackathon_top_bar_description') and
t('home_hackathon_top_bar_action'); ensure aria-label/title still use
t('home_hackathon_top_bar_aria_label') and t('home_hackathon_top_bar_close').
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: afcd89f5-d1e7-40d2-bfc2-16789a915968
⛔ Files ignored due to path filters (6)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by nonestyles/Home.module.lessis excluded by none and included by nonestyles/globals.cssis excluded by none and included by nonetranslation/en-US.tsis excluded by none and included by nonetranslation/zh-CN.tsis excluded by none and included by nonetranslation/zh-TW.tsis excluded by none and included by none
📒 Files selected for processing (1)
pages/index.tsx
TechQuery
requested changes
Apr 30, 2026
Comment on lines
+34
to
+37
| home_hackathon_top_bar_aria_label: 'Labor AI Hackathon 2026 活动宣传', | ||
| home_hackathon_top_bar_badge: '活动招募中', | ||
| home_hackathon_top_bar_title: '打工人の终极反叛', | ||
| home_hackathon_top_bar_description: '48 小时，来这里创造未来', |
Member
There was a problem hiding this comment.
Member
Author
There was a problem hiding this comment.
我尝试了代码复用，但是没有拿到 name 的数据，麻烦 @TechQuery 再帮我看一下代码
- Replace raw HTML with Alert, Alert.Link, CloseButton - Move complex styles from styled-jsx to PromoBar.module.less - Add Bootstrap utility classes for layout - Fetch activity name/link from Lark Bitable via ActivityModel - Keep localStorage persistence commented out
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/Activity/PromoBar.tsx`:
- Around line 41-50: 在 useEffect 中对异步加载添加卸载保护：在 useEffect 里创建一个标志（例如 let mounted
= true 或使用 AbortController 如果 ActivityModel.getOne 支持取消），在 getOne
调用前保留该标志/控制器，并在 Promise resolve 前检查 mounted，只有 mounted 为 true 时才调用 setActivity；在
useEffect 返回的 cleanup 函数将 mounted 设为 false（或调用
controller.abort()）以阻止组件卸载后继续更新或消耗请求资源。确保引用的符号为 useEffect、ActivityModel.getOne 和
setActivity。
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4a3b4906-bb3f-4728-9d11-7adac39ad05a
📒 Files selected for processing (4)
components/Activity/PromoBar.module.lesscomponents/Activity/PromoBar.tsxcomponents/Navigator/MainNavigator.tsxpages/index.tsx
✅ Files skipped from review due to trivial changes (3)
- pages/index.tsx
- components/Activity/PromoBar.module.less
- components/Navigator/MainNavigator.tsx
Comment on lines
+41
to
+50
| useEffect(() => { | ||
| (async () => { | ||
| try { | ||
| const model = new ActivityModel(); | ||
| const data = await model.getOne('Labor-AI-hackathon-2026'); | ||
| setActivity(data); | ||
| } catch (err) { | ||
| console.error('Failed to load activity:', err); | ||
| } | ||
| })(); |
There was a problem hiding this comment.
补上异步加载的卸载保护。
getOne() 可能在组件卸载后才返回，当前代码会继续 setActivity，留下陈旧更新并浪费请求资源。
♻️ 建议修复
useEffect(() => {
+ let cancelled = false;
+
(async () => {
try {
const model = new ActivityModel();
const data = await model.getOne('Labor-AI-hackathon-2026');
- setActivity(data);
+ if (!cancelled) setActivity(data);
} catch (err) {
+ if (cancelled) return;
console.error('Failed to load activity:', err);
}
})();
+
+ return () => {
+ cancelled = true;
+ };
}, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/Activity/PromoBar.tsx` around lines 41 - 50, 在 useEffect
中对异步加载添加卸载保护：在 useEffect 里创建一个标志（例如 let mounted = true 或使用 AbortController 如果
ActivityModel.getOne 支持取消），在 getOne 调用前保留该标志/控制器，并在 Promise resolve 前检查
mounted，只有 mounted 为 true 时才调用 setActivity；在 useEffect 返回的 cleanup 函数将 mounted
设为 false（或调用 controller.abort()）以阻止组件卸载后继续更新或消耗请求资源。确保引用的符号为
useEffect、ActivityModel.getOne 和 setActivity。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Checklist（清单）:
pnpm-lock.yaml有变动导致eslint.config.ts:29的@next/next插件类型不匹配Summary by CodeRabbit
发布说明